<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>j2me在线模拟器-批量安装版本</title>
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">
        <script>
        var _hmt = _hmt || [];
        (function() {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?9940f26304b1f1a1a415df829cd440f3";
        var s = document.getElementsByTagName("script")[0]; 
        s.parentNode.insertBefore(hm, s);
        })();
        </script>

		<!-- Required for non-UTF encodings -->
		<script src="libs/encoding.js"></script>
		<!-- Load config scripts separately because compiled-method-cache.js
     - depends on them. -->
		<script type="text/javascript" src="config/default.js" defer></script>
		<script type="text/javascript" src="config/runtests.js" defer></script>
		<script type="text/javascript" src="config/build.js" defer></script>
		<script type="text/javascript" src="config/urlparams.js" defer></script>


		<!--<script type="text/javascript" src="libs/terminal.js" defer></script>-->

		<!-- Load promise-6.0.0.js and IndexedDB-getAll-shim.js separately
     - because compiled-method-cache.js depends on them. -->
		<script type="text/javascript" src="libs/promise-6.0.0.js" defer></script>
		<script type="text/javascript" src="polyfill/IndexedDB-getAll-shim.js" defer></script>

		<!-- Load compiled-method-cache.js separately because j2me.js depends on it. -->
		<script type="text/javascript" src="libs/compiled-method-cache.js" defer></script>

		<!-- Load bld/native.js separately because adding it to main-all.js
     - throws an "asm.js type error". -->
		<script type="text/javascript" src="bld/native.js" defer></script>

		<!-- Load j2me.js separately because classes.jar.js depends on it (it adds
     - members to the AOTMD hash that j2me.js defines); and also so its source
     - map gets loaded by the debugger. -->
		<script type="text/javascript" src="bld/j2me.js" defer></script>

		<!-- Run `make aot` to generate these.  Load them separately, because adding
     - classes.jar.js to main-all.js fails silently for unknown reasons. -->
		<!--<script type="text/javascript" src="bld/classes.jar.js" defer></script>-->
		<!--<script type="text/javascript" src="bld/program.jar.js" defer></script>-->
		<!--<script type="text/javascript" src="bld/tests.jar.js" defer></script>-->

		<!-- Load the rest of the scripts from the combined script main-all.js
     - to improve startup and runtime performance.  See Makefile for the list
     - of files that get combined into this one. -->
		<script type="text/javascript" src="bld/main-all.js" defer></script>

	</head>
	<body>

		<div id="pageContainer" style="display: none;">
			<pre id="consoleContainer"></pre>
			<div id="profilerContainer">
				<div id="profilerToolbar">
					<div class="toolbarLabel">Profiler <span id="profilerMessage" class="toolbarMessage">6
							Seconds</span></div>
					<div id="profilerButtons">
						<div id="profilerStartStop">Start</div>
						<div id="profilerAdjustHeight">Height</div>
					</div>
				</div>
				<div id="profiler">
					<div id="profileList">
					</div>
					<div id="profilePanel">
					</div>
				</div>
			</div>
		</div>

		<!-- The raw console is used for unit tests, so it's not visible by default: -->
		<pre id="raw-console" style="display: none"></pre>

		<div id="display-container" style="display: none;">
			<div id="display">
				<section id="sidebar" data-type="sidebar" style="display:none">
					<header>
						<h1>Menu</h1>
					</header>
					<nav>
						<ul>
						</ul>
					</nav>
				</section>
				<section id="drawer" role="region">
					<header style="display:none">
						<a href="#"><span class="icon icon-menu">hide sidebar</span></a>
						<a id="header-drawer-button" href="#drawer"><span class="icon icon-menu">show sidebar</span></a>
						<menu id="header-ok-button" type="toolbar" style="display:none"><button>√</button></menu>
						<h1 id="display_title"></h1>
					</header>
					<div id="main" role="main">
						<canvas id="canvas"></canvas>
						<input id="password-editor" class="text-editor" type="password">
						<input id="tel-editor" class="text-editor" type="tel">
						<input id="number-editor" class="text-editor" type="number">
						<input id="email-editor" class="text-editor" type="email">
						<input id="url-editor" class="text-editor" type="url">
						<div id="textarea-editor" class="text-editor" contenteditable="true"></div>
						<!-- The hidden textarea editor is used to measure the content height -->
						<div id="hidden-textarea-editor" class="text-editor"></div>
						<button id="back-button">Back</button>
					</div>
				</section>

				<div id="gamepad" onselectstart='return false' οnselect='document.selection.empty()'>
					<div id="padcontent">
						<button>1</button>
						<button>2</button>
						<button>3</button>
						<button>L</button>
						<div></div>
						<button>R</button>
					</div>
					<div id="padcontent">
						<button>4</button>
						<button>5</button>
						<button>6</button>
						<div></div>
						<button>up</button>
					</div>
					<div id="padcontent">
						<button>7</button>
						<button>8</button>
						<button>9</button>
						<button>left</button>
						<button>OK</button>
						<button>right</button>
					</div>
					<div id="padcontent">
						<button>*</button>
						<button>0</button>
						<button>#</button>
						<div></div>
						<button>down</button>
					</div>
				</div>

				<div id="download-screen" class="screen">
					<h1 class="title">Downloading midlet…</h1>
					<div class="download-progress-container">
						<progress class="pack-activity" value="0" max="100"></progress>
					</div>
				</div>

				<div id="splash-screen" class="screen">
					<h1 class="title">Starting midlet…</h1>
					<div class="splash-progress-container">
						<progress></progress>
					</div>
				</div>

				<div id="exit-screen" class="screen">
				</div>

				<div id="background-screen">
				</div>

				<form role="dialog" data-type="confirm" class="lcdui-alert" id="lcdui-alert" style="display: none">
					<section>
						<h1 class="title"></h1>
						<p class="text"></p>
						<p style="border-top: 0"><progress style="display: none"></progress></p>
					</section>
					<menu>
						<button class="button0" style="display: none"></button>
						<button class="button1" style="display: none"></button>
					</menu>
				</form>

				<form role="dialog" data-type="confirm" class="sms-listener-prompt" id="sms-listener-prompt"
					style="display: none">
					<section>
						<h1>SMS Verification</h1>
						<p class="verificationText"></p>
						<input type="text" placeholder="Type SMS Here">
						<p class="timeLeft"></p>
						<progress class="timeLeftBar" value="0" max="100"></progress>
					</section>
					<menu>
						<button class="cancel">Cancel</button>
						<button class="recommend">Done</button>
					</menu>
				</form>

				<form role="dialog" data-type="confirm" class="nokia-fileui-prompt" id="nokia-fileui-prompt"
					style="display: none">
					<section>
						<h1>Select a file</h1>
						<p><input type="file" name="nokia-fileui-file">
					</section>
					<menu>
						<button class="cancel">Cancel</button>
						<button class="recommend">Done</button>
					</menu>
				</form>

				<form role="dialog" data-type="confirm" class="download-failure-dialog" id="download-failure-dialog"
					style="display: none">
					<section>
						<h1 class="download-dialog-text">Download failure</h1>
						<p>The download of midlet failed. Press <i>Retry</i> to try again.</p>
					</section>
					<menu>
						<button class="recommend">Retry</button>
					</menu>
				</form>
			</div>
			<div id="settings">
				<section>
					<table id="counters">
						<tr>
							<td>Bytecode:</td>
							<td><span id="bytecodeCount"></span></td>
						</tr>
						<tr>
							<td>Compiled:</td>
							<td><span id="compiledCount"></span></td>
						</tr>
						<tr>
							<td>Interpreter:</td>
							<td><span id="interpreterCount"></span></td>
						</tr>
						<tr>
							<td>OSR:</td>
							<td><span id="onStackReplacementCount"></span></td>
						</tr>
						<tr>
							<td>Unwind:</td>
							<td><span id="unwindCount"></span></td>
						</tr>
						<tr>
							<td>Preemption:</td>
							<td><span id="preemptionCount"></span></td>
						</tr>
					</table>
				</section>
				<section>
					<select id="loglevel">
						<option value="0">Log Level: Trace
						<option value="1">Log Level: Log
						<option value="2">Log Level: Info
						<option value="3">Log Level: Warn
						<option value="4">Log Level: Error
						<option value="5">Log Level: Silent
					</select>
					<input id="console-filter-input" type="text" placeholder="Filter Console Output" value="">
					<button id="console-clear">Clear console</button>
					<button id="console-save">Save console</button>
					<label><input type="checkbox" id="perfWriter">Perf</label>
				</section>
				<section>
					<button id="exportstorage">Export File System</button>
					<div>Import File System:</div>
					<input type="file" id="importstoragefile">
					<input type="text" id="importstorageurl" placeholder="URL to FS backup">
					<button id="importstorage">Import</button>
					<button id="clearCompiledMethodCache">Clear Compiled Method Cache</button>
					<button id="deleteDatabases">Delete IDB Databases</button>
					<button id="printAllExceptions">Print all exceptions: OFF</button>
					<button id="clearCounters">Clear Counters</button>
					<button id="dumpCounters">Dump Counters</button>
					<button id="sampleCounters1">One sample for 1s</button>
					<button id="sampleCounters2">One sample for 100ms (2s)</button>
					<select id="canvasSize1">
						<option value="" selected>Display size: 240x320</option>
						<option value="size-320x240">Display size: 320x240</option>
						<option value="size-320x480">Display size: 320x480</option>
						<option value="size-480x320">Display size: 480x320</option>
					</select>
					<button id="start">Start</button>

				</section>
			</div>
		</div>



		<input id="jarFileupload" accept=".jar" multiple="true" type="file" style="visibility: hidden;display:none;" />
		<h3>游戏列表：</h3>
	
			<script type="text/javascript">

					function processLocalJAD(data) {
						var manifest = {};
					data.replace(/\r\n|\r/g, "\n").replace(/\n /g, "").split("\n").forEach(function(entry) {
						if (entry) {
						var keyEnd = entry.indexOf(":");
						var key = entry.substring(0, keyEnd);
						var val = entry.substring(keyEnd + 1).trim();
						manifest[key] = val;
						}
					});

					return manifest;
					} 
					
				function loadFileFromLocalJAR(jar, fileName) { 
					var entry = jar[fileName];
					if (!entry) {
					return null;
					}
					var bytes;
					if (entry.compression_method === 0) {
					bytes = entry.compressed_data;
					} else {
					if (entry.compression_method === 8) {
						bytes = inflate(entry.compressed_data, entry.uncompressed_len);
					} else {
						return null;
					}
					}
					if (!jar.isBuiltIn && fileName.endsWith(".class")) {
					delete jar.directory[fileName];
					}
					return bytes;
				}

				// 字节流转图片
				 function formatByte2Img(data) {
					var blobUrl = ''
					const bytes = new Uint8Array(data)
					const blob = new Blob([bytes], { type: 'image/png' })
					blobUrl = (window.URL || window.webkitURL).createObjectURL(blob)
					return blobUrl
				}
				function addToPanel(jarfile)
				{
					var gamepanel = document.getElementById("gamepanel");
					if(gamepanel)
					{
						var data=loadFileFromLocalJAR(jarfile.jar,"META-INF/MANIFEST.MF"); 
						var mfdata = new TextDecoder("utf-8").decode(data);
						var jaddata = processLocalJAD(mfdata)
						
					    var jarNameMid=jaddata['MIDlet-1'];
						jarName=jarNameMid.substr(0,jarNameMid.indexOf(',')).trim()
						var iconname=jaddata['MIDlet-Icon'];
						if(!iconname)
						{ 
							iconname=jarNameMid.split(',')[1].trim();
						}
						if(iconname && iconname.indexOf('/')==0)
						{
							iconname=iconname.substr(1);
						} 
						//console.log(jaddata); 
						var icondata = loadFileFromLocalJAR(jarfile.jar,iconname); 
						var iconurl=formatByte2Img(icondata)

						var htmldata='<a class="game" style="" href="javascript:void(0)" onclick="openJar(\''+jarfile.jarName+'\',0,1);"> <div style="height:64px;"> <img width=60 height=60 src="'+iconurl+'"></img> </div> '+jarName+' </a>'

						gamepanel.innerHTML+=htmldata;
					}
				}

				function refreshGameList() {
					JARStore.getAll().then(
						(files) => {
							var localjars = document.getElementById('localjars');
							localjars.length = 0;
							var gamepanel = document.getElementById("gamepanel");
							gamepanel.innerHTML = '<a class="game" style="" href="javascript:void(0)" onclick="openJar(\'Anyview4.0.jar\',\'com.ismyway.anyview.Anyview\');"> <div style="height:64px;"> <img src="img/anyview.png"></img> </div> Anyview </a> ';
							for (var i = 0; i < files.length; i++) {
								var f = files[i];
								//console.log(f)
								//console.log(f.jarName);
								//JARStore.loadJAR(f.jarName); 
								try{
									localjars.options.add(new Option(f.jarName));
									addToPanel(f);
								}catch(err)
								{
									console.log(err)
								}
							}
							var gameindex = config01.getValueByKey("gameindex");
							var localjars = document.getElementById('localjars');
							if (gameindex >= files.length) {
								gameindex = files.length - 1;
							}
							localjars.selectedIndex = gameindex;
						},
						(err) => {
							alert(err);
						}
					);
				}

				function loadLocalJar() {

					var localjars = document.getElementById('localjars');
					if (localjars.options.length == 0) {
						alert("请先上传jar!");
						return;
					}
					if (localjars.selectedIndex < 0 || localjars.selectedIndex >= localjars.options.length) {
						alert("请选择jar名称!");
						return;
					}
					var jarname = localjars.options[localjars.selectedIndex].text;
					console.log(jarname);
					openJar(jarname, "", 1);

				}

				function alertSuccess(successcount,failcount){
					alert("安装完成，成功 "+successcount +"个，失败 "+failcount +"个");
				}

				function deleteLocalJar() {

					var localjars = document.getElementById('localjars');
					if (localjars.options.length == 0) {
						alert("没有要删除的jar!");
						return;
					}
					if (localjars.selectedIndex < 0 || localjars.selectedIndex >= localjars.options.length) {
						alert("请选择jar名称!");
						return;
					}
					var jarname = localjars.options[localjars.selectedIndex].text;
					console.log(jarname);
					let res = confirm('确定删除 ' + jarname + ' ？');
					if (res) {
						JARStore.deleteJar(jarname).then(
							() => {
								alert(jarname + "删除成功！");
								refreshGameList();

							},
							(errname) => {
								alert(errname + "删除失败！");
							}
						);
					}
				}

				function clearLocalJar()
				{
					let res = confirm('确定清空本地jar吗 ？');
					if (res) {
						JARStore.clear().then(
							() => {
								alert(jarname + "清空成功！");
							},
							(errname) => {
								alert(errname + "清空失败！");
							}
						); 
						refreshGameList(); 
					}
				}

				var onUploadFile = function(e) {
					const _files = e.target.files;
					if (_files.length == 0) {
						return;
					}
					var successcount = 0;
					var failcount = 0;
					var allcount = _files.length;
					for(var i=0;i<_files.length;i++)
					{
						const _file = _files[i];
						if (!_file.name.toLowerCase().endsWith('.jar')) {
							//alert("只能上传jar格式!");
							//return;
							failcount++;
							continue;
						}
						//fs.createUniqueFile("/Phone",_file.name,_file);
						const reader = new FileReader();
						reader.readAsArrayBuffer(_file);
						reader.onload = function(readRes) {
							JARStore.installJAR(_file.name, readRes.target.result).then(
								() => {
									successcount++;
									if(successcount+failcount>=allcount)
									{
										alertSuccess(successcount,failcount);
										refreshGameList();
									} 
								},
								(errname) => {
									failcount++;
									if(successcount+failcount>=allcount)
									{
										alertSuccess(successcount,failcount);
										refreshGameList();
									} 
								}
							);
							document.getElementById("jarFileupload").value = null;
						}
					}
				}

				var config = function() {
					var myInfo = {
						canvasSize: 4,
						gamepadSize: 0,
						gameresize: 0,
						gameindex: 0,
					};
					if (window.localStorage["my"] === undefined) {
						window.localStorage["my"] = JSON.stringify(myInfo);
					} else {
						var data = JSON.parse(window.localStorage["my"]);
						for (var key in data) {
							myInfo[key] = data[key];
						}
					}
					return {
						//按key从对象中取值
						getValueByKey(key) {
							return myInfo[key]
						},
						//将键值对保存到对象中
						setValueByKey() {
							for (var i = 0; i < arguments.length; i += 2) {
								myInfo[arguments[i]] = arguments[i + 1];
							}
							//将新的数据序列化到本地保存
							window.localStorage["my"] = JSON.stringify(myInfo);
						}
					}
				}

				var config01 = new config();
				window.addEventListener("load", () => {

					var csize = config01.getValueByKey("canvasSize");
					var gsize = config01.getValueByKey("gamepadSize");
					var gresize = config01.getValueByKey("gameresize");

					var gamepadSize = document.getElementById('gamepadSize');
					var canvasSize = document.getElementById('canvasSize');
					var gameresize = document.getElementById('gameresize');


					canvasSize.selectedIndex = csize;
					gamepadSize.selectedIndex = gsize;
					gameresize.selectedIndex = gresize;

					document.getElementById("jarFileupload").addEventListener("change", onUploadFile);
					refreshGameList();

				})


				function openLocalJar() {
					document.getElementById("jarFileupload").click();

				}

				function openJar(jarname, midletClassName, islocaljar) {
					//var mycheck1=document.getElementById('mycheck1'); 
					//var mycheck2=document.getElementById('mycheck2'); 
					var href = 'main.html?jars=jar/' + jarname + '&jad=&midletClassName=' + midletClassName;
					if (islocaljar) {
						href = 'main.html?localjar=' + jarname;
					}
					//if(mycheck1.checked)
					//{
					//	href+="&gamepad=1";
					//}
					/*
					if(mycheck2.checked)
					{
						href+="&enablexy=1";
					}
					*/
					var gamepadSize = document.getElementById('gamepadSize');
					var mvalue = gamepadSize.options[gamepadSize.selectedIndex].value;
					if (mvalue) {
						href += "&gamepadSize=" + mvalue;
						if (gamepadSize.selectedIndex == 0) {
							href += "&gamepad=0";
						} else {
							href += "&gamepad=1";
						}
					}

					var canvasSize = document.getElementById('canvasSize');
					var mvalue = canvasSize.options[canvasSize.selectedIndex].value;
					if (mvalue) {
						href += "&canvasSize=" + mvalue;
					}
					var gameresize = document.getElementById('gameresize');
					var gameresizevalue = gameresize.options[gameresize.selectedIndex].value;
					if (gameresizevalue) {
						href += "&gameresize=" + gameresizevalue;
					}

					var localjars = document.getElementById('localjars');

					config01.setValueByKey("canvasSize", canvasSize.selectedIndex);
					config01.setValueByKey("gamepadSize", gamepadSize.selectedIndex);
					config01.setValueByKey("gameresize", gameresize.selectedIndex);
					config01.setValueByKey("gameindex", localjars.selectedIndex)

					window.location.href = href;
				}
			</script>
	  <div style="display:flex;flex-wrap: wrap; margin: 10px 0px;float:left;align-items: center;" id="gamepanel">

			<a class="game" style="" href="javascript:void(0)"
				onclick="openJar('Anyview4.0.jar','com.ismyway.anyview.Anyview');">
				<div style="height:64px;">
					<img src="img/anyview.png"></img>
				</div>
				Anyview
			</a> 
			
		</div>

		<!-- <label><input id="mycheck1" name="enablekey" type="checkbox"  checked value="" />启用按键</label> -->
		<!-- <label><input id="mycheck2" name="enablexy" type="checkbox" value="" />自适应缩放</label>  -->
		<div style="margin-top: 100px; clear: both;">

			<select id="canvasSize" class="filter-box">
				<option value="size-240x320">显示尺寸: 240x320</option>
				<option value="size-320x240">显示尺寸: 320x240</option>
				<option value="size-360x640">显示尺寸: 360x640</option>
				<option value="size-640x360">显示尺寸: 640x360</option>
				<option value="size-no" selected>显示尺寸: 无限制</option>
			</select>
			<select id="gamepadSize" class="filter-box">
				<option value="gamepad-0" selected>虚拟键盘-无</option>
				<option value="gamepad-1">虚拟键盘-小</option>
				<option value="gamepad-2">虚拟键盘-中</option>
				<option value="gamepad-3">虚拟键盘-大</option>
				<option value="gamepad-4">虚拟键盘-特大</option>
			</select>

			<select id="gameresize" class="filter-box">
				<option value="resize-1" selected>无缩放</option>
				<option value="resize-1x5">缩放1.5倍</option>
				<option value="resize-2">缩放2倍</option>
				<option value="resize-2x5">缩放2.5倍</option>
				<option value="resize-3">缩放3倍</option>
			</select>
			</br>
			</br>
			<select id="localjars" class="filter-box">
					<option value="" selected>无项目</option>
			</select>
			<button class="btn" onclick="openLocalJar()">
				选择本地jar
			</button>

			<button class="btn" onclick="loadLocalJar()">
				运行本地jar
			</button>

			<button class="btn" onclick="deleteLocalJar()">
				删除本地jar
			</button>
			<button class="btn" onclick="clearLocalJar()">
				清空本地jar
			</button>

			</br>
			</br>
			</br>
			</br>
			<a href="index.html" style="float: right;">
				标准版本
			</a>
			</br>
			</br>
			<a href="updatelog.html" style="float: right;">
				更新日志
			</a>
			</br>
			</br>
		</div>

		
		<style>
			@media screen and (min-width: 1080px) {
				body {
					margin: 0 auto;
					padding-left: 20%;
					padding-right: 20%;
					padding-top: 50px;
				}

				.filter-box {
					width: 240px;
					height: 34px;
					background-color: #ffffff;
					border: solid 1px #dcdcdc;
					font-family: Roboto;
					font-size: 12px;
					font-weight: normal;
					font-style: normal;
					font-stretch: normal;
					letter-spacing: normal;
					text-align: left;
					color: #3d3d3d;
					padding-left: 10px;
					border-color: #dcdcdc;
					-webkit-appearance: none;
				}

				select {
					background-image: url(backdropdown.png);
					background-position: 222px 9px;
					font-family: Roboto;
					font-size: 12px;
					color: #3d3d3d;
					background-repeat: no-repeat;
				}

				.game {
					height: 100px;
					width: 80px;
					text-align: center;
					width: 120px;
					height: 100px;
					border: 1px solid silver;
					margin-right: 10px;
					padding: 10px;
					border-radius: 5px;
					text-align: center;
					margin-top: 10px;
				}

				.btn {
					background: #eb94d0;
					/* 创建渐变 */
					background-image: -webkit-linear-gradient(top, #eb94d0, #2079b0);
					background-image: -moz-linear-gradient(top, #eb94d0, #2079b0);
					background-image: -ms-linear-gradient(top, #eb94d0, #2079b0);
					background-image: -o-linear-gradient(top, #eb94d0, #2079b0);
					background-image: linear-gradient(to bottom, #eb94d0, #2079b0);
					/* 给按钮添加圆角 */
					-webkit-border-radius: 8;
					-moz-border-radius: 8;
					border-radius: 8px;
					text-shadow: 3px 2px 1px #9daef5;
					-webkit-box-shadow: 6px 5px 24px #666666;
					-moz-box-shadow: 6px 5px 24px #666666;
					box-shadow: 6px 5px 24px #666666;
					font-family: Arial;
					color: #fafafa;
					font-size: 9px;
					padding: 10px;
					text-decoration: none;
					margin-right: 5px;
				}

				/* 悬停样式 */
				.btn:hover {
					background: #2079b0;
					background-image: -webkit-linear-gradient(top, #2079b0, #eb94d0);
					background-image: -moz-linear-gradient(top, #2079b0, #eb94d0);
					background-image: -ms-linear-gradient(top, #2079b0, #eb94d0);
					background-image: -o-linear-gradient(top, #2079b0, #eb94d0);
					background-image: linear-gradient(to bottom, #2079b0, #eb94d0);
					text-decoration: none;
				}

				.blink {
					font-size: 46px;
					color: #4cc134;
					margin: 10px;
					animation: changeshadow 1s ease-in infinite;
					/* 其它浏览器兼容性前缀 */
					-webkit-animation: changeshadow 1s linear infinite;
					-moz-animation: changeshadow 1s linear infinite;
					-ms-animation: changeshadow 1s linear infinite;
					-o-animation: changeshadow 1s linear infinite;
				}

				@keyframes changeshadow {
					0% {
						text-shadow: 0 0 4px #4cc134
					}

					50% {
						text-shadow: 0 0 40px #4cc134
					}

					100% {
						text-shadow: 0 0 4px #4cc134
					}
				}

				/* 添加兼容性前缀 */
				@-webkit-keyframes changeshadow {
					0% {
						text-shadow: 0 0 4px #4cc134
					}

					50% {
						text-shadow: 0 0 40px #4cc134
					}

					100% {
						text-shadow: 0 0 4px #4cc134
					}
				}

				@-moz-keyframes changeshadow {
					0% {
						text-shadow: 0 0 4px #4cc134
					}

					50% {
						text-shadow: 0 0 40px #4cc134
					}

					100% {
						text-shadow: 0 0 4px #4cc134
					}
				}

				@-ms-keyframes changeshadow {
					0% {
						text-shadow: 0 0 4px #4cc134
					}

					50% {
						text-shadow: 0 0 40px #4cc134
					}

					100% {
						text-shadow: 0 0 4px #4cc134
					}
				}

				@-o-keyframes changeshadow {
					0% {
						text-shadow: 0 0 4px #4cc134
					}

					50% {
						text-shadow: 0 0 40px #4cc134
					}

					100% {
						text-shadow: 0 0 4px #4cc134
					}
				}
			}

			@media screen and (min-width: 300px) and (max-width: 1080px) {
				body {
					/* 		margin: 0 auto;
					padding-left: 10%;
					padding-right: 10%;
					padding-top: 10px; */
				}

				#gameListDiv {
					justify-content: center;
				}


				.filter-box {
					width: 100%;
					height: 34px;
					background-color: #ffffff;
					border: solid 1px #dcdcdc;
					font-family: Roboto;
					font-size: 12px;
					font-weight: normal;
					font-style: normal;
					font-stretch: normal;
					letter-spacing: normal;
					text-align: left;
					color: #3d3d3d;
					padding-left: 10px;
					border-color: #dcdcdc;
					margin-top: 5px;
					-webkit-appearance: none;
				}

				select {
					background-image: url(backdropdown.png);
					background-position: 222px 9px;
					font-family: Roboto;
					font-size: 12px;
					color: #3d3d3d;
					background-repeat: no-repeat;
				}

				.game {
					height: 80px;
					width: 90px;
					text-align: center;
					border: 1px solid silver;
					margin-right: 15px;
					padding: 10px;
					border-radius: 5px;
					text-align: center;
					margin-top: 10px;
					font-size: 9px;
					padding-bottom: 10px;
				}

				.btn {
					margin-top: 5px;
					background: #eb94d0;
					/* 创建渐变 */
					background-image: -webkit-linear-gradient(top, #eb94d0, #2079b0);
					background-image: -moz-linear-gradient(top, #eb94d0, #2079b0);
					background-image: -ms-linear-gradient(top, #eb94d0, #2079b0);
					background-image: -o-linear-gradient(top, #eb94d0, #2079b0);
					background-image: linear-gradient(to bottom, #eb94d0, #2079b0);
					/* 给按钮添加圆角 */
					-webkit-border-radius: 8;
					-moz-border-radius: 8;
					border-radius: 8px;
					text-shadow: 3px 2px 1px #9daef5;
					-webkit-box-shadow: 6px 5px 24px #666666;
					-moz-box-shadow: 6px 5px 24px #666666;
					box-shadow: 6px 5px 24px #666666;
					font-family: Arial;
					color: #fafafa;
					font-size: 9px;
					padding: 10px;
					text-decoration: none;
					margin-right: 5px;
				}

				/* 悬停样式 */
				.btn:hover {
					background: #2079b0;
					background-image: -webkit-linear-gradient(top, #2079b0, #eb94d0);
					background-image: -moz-linear-gradient(top, #2079b0, #eb94d0);
					background-image: -ms-linear-gradient(top, #2079b0, #eb94d0);
					background-image: -o-linear-gradient(top, #2079b0, #eb94d0);
					background-image: linear-gradient(to bottom, #2079b0, #eb94d0);
					text-decoration: none;
				}

				.blink {
					font-size: 46px;
					color: #4cc134;
					margin: 10px;
					animation: changeshadow 1s ease-in infinite;
					/* 其它浏览器兼容性前缀 */
					-webkit-animation: changeshadow 1s linear infinite;
					-moz-animation: changeshadow 1s linear infinite;
					-ms-animation: changeshadow 1s linear infinite;
					-o-animation: changeshadow 1s linear infinite;
				}

				@keyframes changeshadow {
					0% {
						text-shadow: 0 0 4px #4cc134
					}

					50% {
						text-shadow: 0 0 40px #4cc134
					}

					100% {
						text-shadow: 0 0 4px #4cc134
					}
				}

				/* 添加兼容性前缀 */
				@-webkit-keyframes changeshadow {
					0% {
						text-shadow: 0 0 4px #4cc134
					}

					50% {
						text-shadow: 0 0 40px #4cc134
					}

					100% {
						text-shadow: 0 0 4px #4cc134
					}
				}

				@-moz-keyframes changeshadow {
					0% {
						text-shadow: 0 0 4px #4cc134
					}

					50% {
						text-shadow: 0 0 40px #4cc134
					}

					100% {
						text-shadow: 0 0 4px #4cc134
					}
				}

				@-ms-keyframes changeshadow {
					0% {
						text-shadow: 0 0 4px #4cc134
					}

					50% {
						text-shadow: 0 0 40px #4cc134
					}

					100% {
						text-shadow: 0 0 4px #4cc134
					}
				}

				@-o-keyframes changeshadow {
					0% {
						text-shadow: 0 0 4px #4cc134
					}

					50% {
						text-shadow: 0 0 40px #4cc134
					}

					100% {
						text-shadow: 0 0 4px #4cc134
					}
				}
			}
		</style>
	</body>
</html>